<template>
	<el-dialog class="edit-dialog" :title="title" :visible.sync="dialogFormVisible" width="600px">
		<el-form :model="form" :label-position="labelPosition" size="small" ref="formRef" :rules="rules">
			<el-row :gutter="50">
				<el-col :span="24">
					<el-form-item prop="name">
						<span slot="label">客户账户选择</span>
						<el-select v-model="form.customer_uid" placeholder="请选择">
							<el-option v-for="item in typelist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

			</el-row>
			<el-row :gutter="50">
				<el-col :span="24">
					<el-form-item prop="">
						<span slot="label">发布平台(头条/百家)</span>
						<el-select v-model="form.publishing_platform" placeholder="请选择">
							<el-option v-for="item in platformlist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="50">
				<el-col :span="24">
					<el-form-item prop="">
						<span slot="label">文章标题</span>
						<el-input type="textarea" autocomplete="off" v-model="form.title" placeholder="请输入文章标题">
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="50">
				<el-col :span="24">
					<el-form-item prop="">
						<span slot="label">封面/图片文件</span>
						<el-upload action="https://pm.ab0769.com/api/common/upload" :limit="vo_limit" :file-list="file_list"
							:on-success="on_success" :auto-upload="true" list-type="picture-card"
							:on-preview="handlePictureCardPreview" :on-remove="handleRemove">
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="50">
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">浏览量</span>
						<el-input autocomplete="off" v-model="form.views_number" placeholder="请输入浏览量">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">点赞数量</span>
						<el-input autocomplete="off" v-model="form.likes_number" placeholder="请输入点赞量">
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="50">
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">评论/回复数量</span>
						<el-input autocomplete="off" v-model="form.reply_number" placeholder="请输入评论/回复数量">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">分享数量</span>
						<el-input autocomplete="off" v-model="form.share_number" placeholder="请输入分享数量">
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="50">
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">发布状态</span>
						<el-select v-model="form.release_status" placeholder="请选择">
							<el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="">
						<span slot="label">发布时间</span>
						<el-date-picker v-model="form.release_time" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
			<el-button type="primary" @click="submits" size="small">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		Message
	} from 'element-ui';
	export default {
		data() {
			return {
				vo_limit: 1,
				value1: '',
				type: '',
				dialogFormVisible: false,
				labelPosition: "top",
				title: "",
				file_list:[],
				platformlist: [{
					id: 1,
					name: '头条'
				}, {
					id: 2,
					name: '百家'
				}],
				statelist: [{
						id: 1,
						name: '已发布'
					},
					{
						id: 0,
						name: '未发布'
					}
				],
				typelist: [],
				statelist: [{
						id: 1,
						name: '是'
					},
					{
						id: 0,
						name: '否'
					}
				],
				form: {
					id: 0,
					customer_uid: '',
					publishing_platform: '',
					publishing_platform_s: 2,
					title: '',
					cover_img: '',
					views_number: '',
					likes_number: '',
					reply_number: '',
					share_number: '',
					release_status: '',
					release_time: '',
				},
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择类型',
						trigger: 'change'
					}],
				},

			};
		},
		methods: {
			on_success(response,file,filds) {
				this.file_list=filds
				this.form.cover_img = response.data.url;
			},
			init(id) {
				this.file_list=[];
				this.dialogFormVisible = true;
				this.title = id ? '修改头条平台发布记录' : '添加头条平台发布记录';
				/* setTimeout(() => { // DOM未渲染，所以开个定时器
					this.$refs['formRef'].resetFields(); // 重置表单
					this.form.id = id;

				}, 30); */
				this.$http.post("common/users", {}).then(res => {
					res.data.records.map(item => {
						this.typelist.push({
							id: item.id,
							name: item.username,
						})
					})
				})

				if (id > 0) {
					this.$http.post("Contentstatistics/lists", {
						'ids': id,
						'page': 1,
						'limit': 1
					}).then((response) => {
						var da = response.data.records[0];
						this.form= {
								id: da.id,
								customer_uid: da.customer_uid,
								publishing_platform: da.publishing_platform,
								publishing_platform_s: da.publishing_platform_s,
								title: da.customer_uid,
								cover_img: da.cover_img,
								views_number: da.views_number,
								likes_number: da.likes_number,
								reply_number: da.reply_number,
								share_number: da.share_number,
								release_status: da.release_status,
								release_time: da.release_time,
							};
				this.file_list.push({
					'name':"url.mp4",
					'url':'http://pm.ab0769.com'+da.cover_img,
				}); 
					});
				}



			},
			submits() {
				var thas = this;
				this.$refs['formRef'].validate((valid) => {
					if (valid) {
						var path = "Contentstatistics/add"
						if (this.form.id > 0) {
							path = 'Contentstatistics/edit'
						}
						this.$http.post(path, this.form).then((response) => {

							Message({
								type: 'success',
								message: '保存成功'
							});
							setTimeout(() => {
								thas.$emit("refreshDataList");
							}, 1500)
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleRemove(file) {
				console.log(file);
			},
			handlePictureCardPreview(file) {
				console.log(file);
			},
		},
	};
</script>

<style lang="scss">
	.edit-dialog {
		.el-dialog__body {
			padding-top: 0 !important;
		}

		.el-form-item {
			margin-bottom: 5px !important;
		}

		.el-form--label-top .el-form-item__label {
			padding-bottom: 0 !important;
		}

		.el-select {
			width: 100%;
		}

		.el-upload--picture-card {
			width: 100px;
			height: 100px;
			line-height: 100px;
		}
	}
</style>
